<template>
  <div class="box-000">
    <!-- <el-card class="box-700">
      <el-select v-model="selectedWeek1" placeholder="请选择周数" @change="getTData">
        <el-option v-for="week1 in weeks1" :key="week1" :label="`第${week1}周`" :value="week1"></el-option>
      </el-select>
      <el-table :data="table1Data" style="width: 100%" class="headerTable">
        <el-table-column prop="totalSession" label="总场次：" width="500" />
        <el-table-column prop="totalSell" label="总票房：" width="500" />
        <el-table-column prop="totalPeople" label="总人次：" width="500" />
      </el-table>
    </el-card> -->
    <!-- <el-card class="box-300"> -->
    <!-- </el-card> -->
    <el-card class="box-400">
      <el-select v-model="selectedWeek" placeholder="请选择周数" @change="getData">
        <el-option v-for="week in weeks" :key="week" :label="`第${week}周`" :value="week"></el-option>
      </el-select>
      <div id="chart" style="width: 1300px; height: 640px;"></div>
    </el-card>
    <el-card class="box-500">
      <div id="chart1" style="width: 1300px; height: 600px;"></div>
    </el-card>
    <el-card class="box-600">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="cinemaName" label="影院名称" width="400" />
        <el-table-column prop="cinemaArea" label="影院归属地" width="400" />
        <el-table-column prop="openDate" label="开业日期" width="300" />
        <el-table-column prop="screenNumber" label="银幕数量" width="300" />
      </el-table>
      <div class="fenye">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :background="true"
          layout="prev, pager, next,jumper" :total="500" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>
<script>
import * as echarts from "echarts";
// import walden from 'echarts/theme/walden'
export default {
  data() {
    return {
      date: new Date('2023-04-10'),
      chart: null,
      chartData: null,
      table1Data:[],
      tableData:[],
      selectedWeek: 1,
      selectedWeek1:1,
      weeks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
      weeks1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],

    }
  },
  mounted() {
    this.chart = echarts.init(document.getElementById('chart'))
    this.getData()
    this.drawChart1()
    this.getPageData(1, 10);
    this.getTData()

  },
  methods: {
    async getTData() {
    this.$http.get('/areaWeek/v1/total/' + this.selectedWeek1).then((response) => {
        this.table1Data = response.data;
        console.log(this.table1Data)
    })
    },
    getData() {
      this.$http.get('/filmWeek/v1/week/' + this.selectedWeek).then(response => {
        this.chartData = response.data
        console.log(this.chartData)
        this.drawChart()
      })
    },
    drawChart() {
      this.data = this.chartData
      if (!this.data) return
      const colors = [
        "#4B96F3",
        "#10C6A6",
        "#F2AF4B",
        "#FF4D4F",
        "#AA7AF1",
        "#ff7d3d",
        "#ff977b",
        "#36c78b",
        "#e8a2f1",
        "#fec279",
        "#f97e7b",
        "#2ed3cd",
        "#6faaff",
        "#b355ef",
        "#10d8b0",
      ];
      const option = {
        title: {
          text: "每周影片票房趋势",
          left: "center",
          textStyle: {
            color: "#333",
          },
        },

        tooltip: {
          trigger: 'none',

        }
        ,
        textStyle: {
          fontFamily: 'Arial, Verdana, sans-serif',
          fontSize: 20
        },
        series: [{
          type: 'treemap',
          data: [{
            name: '每周影片票房',
            children: this.data.map((item, index) => ({
              name: item.filmName,
              value: item.totalSell,
              itemStyle: {
                color: colors[index % colors.length]
              },
              label: {
                show: true,
                formatter: function (params) {
                  return params.name + ': ' + params.value;
                }
              }
            }))
          }],
          breadcrumb: {
            show: false
          },
          visualMin: 0,
          visualMax: Math.max(...this.data.map(item => item.totalSell)),
          label: {
            show: true,
            formatter: '{b}'
          },
          itemStyle: {
            borderColor: '#fff'
          },
          levels: [
            {
              itemStyle: {
                borderColor: '#555',
                borderWidth: 4,
                gapWidth: 4
              }
            },
            {
              itemStyle: {
                borderColor: '#777',
                borderWidth: 2,
                gapWidth: 2
              }
            },
            {
              itemStyle: {
                borderColor: '#bbb',
                borderWidth: 1,
                gapWidth: 1
              }
            },
            {
              colorSaturation: [0.35, 0.5],
              itemStyle: {
                borderColorSaturation: 0.7,
                gapWidth: 1,
                borderWidth: 1
              }
            }
          ]
        }]
      }
      this.chart.resize()
      this.chart.setOption(option)

    },
    drawChart1() {
      const chart1 = echarts.init(document.getElementById('chart1')); // 初始化 echarts 实例
      this.$http.get('/top100/v1/max').then(response => { // 通过接口获取数据
        const data = response.data;
        console.log(data)
        const option = {
          title: {
          text: "历年冠军影片票房评分",
          left: "left",
          textStyle: {
            color: "#333",
          },
        },
          textStyle: {
            fontFamily: 'Arial, Verdana, sans-serif',
            fontSize: 14
          },
          color: ["#37a2da",
            "#67e0e3",
            "#9fe6b8",
            "#ffdb5c",
            "#ff9f7f",
            "#e062ae",
            "#e690d1",
            "#e7bcf3",
            "#9d96f5",
            "#8378eb"
          ],
          legend: {
            data: ['票房（亿）', '评分']
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: data.map(item => item.filmName),
            boundaryGap: true,
          },
          yAxis: [
            {
              type: 'value',
              name: '票房（亿）',
              position: 'left',
            },
            {
              type: 'value',
              name: '评分',
              position: 'right',

            }
          ],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: false,
            containLabel: true
          },
          series: [
            {
              name: '票房（亿）',
              data: data.map(item => item.box_office),
              type: 'bar',
              colorBy: 'data',
              yAxisIndex: 0, // 使用第一个y轴
            },
            {
              name: '评分',
              data: data.map(item => item.score),
              type: 'line',
              yAxisIndex: 1 // 使用第一个y轴

            },
          ]
        }
        chart1.setOption(option); // 绘制
      })
      this.chart1 = chart1; // 将 echarts 实例赋值给 chart1 属性
    },
    handleSizeChange(pageSize) {//选择每一页记录数
      this.pageSize = pageSize;
      this.getPageData(this.currentPage, this.pageSize);
      console.log("size:", pageSize);
    },
    handleCurrentChange(pageNum) {//切换页号得到当前页码
      this.currentPage = pageNum;
      this.getPageData(this.currentPage, this.pageSize);
      console.log("num:", pageNum);
    },
    getPageData(num, size) {//获取分页数据
      let params = { pageNum: num, pageSize: size };
      console.log('请求参数：', params); // 打印请求参数
      this.$http.get("/newCinema/v1/cinemaInfo", { params })
        .then((response) => {
          console.log(response.data);
          this.pageInfo = response.data;
          this.tableData = this.pageInfo;
          console.log(this.tableData)
        })
    },
  },

}



</script>
<style>
.el-table .headerTable{
  color: blue;
}
.box-000 {
  overflow: auto;
  width: 100%;
  background-color: rgb(253, 248, 248);
}
.box-700{
  width: 98%;
  margin-left: 10px;
  margin-top: 10px;
}
.el-select {
  margin-top: 0px;
}

.box-400 {
  width: 98%;
  margin-left: 8px;
  margin-top: 10px;
}

.box-500 {
  width: 98%;
  margin-left: 8px;
  margin-top: 10px;
}

.box-600 {
  width: 98%;
  margin-left: 8px;
  margin-top: 10px;
}

.el-pagination {
  margin-left: 100px;
}
</style>